<template>
  <!-- 明天写登入页面 -->
  <div class="login_container">
    <div class="login_box">
      <!-- <div class="avatar_box">
        <img src="../assets/logo.png" alt />
      </div>-->
      <!-- label是左侧的文本 prefix-icon是输入匡的左侧图标使用了阿里的图标库 -->
      <!-- form的:modle 是将数据绑定到一个对象上 input的:model 是绑定到对象的属性上 -->
      <!-- :rules 设置一个校验规则对象 inout设置prop设置一个具体的验证规则 -->
      <div>
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="registerFormRules"
          label-width="80px"
          class="login_form"
        >
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="registerForm.phone" prefix-icon="iconfont icon-user"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="registerForm.username" prefix-icon="iconfont icon-user"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="registerForm.name" prefix-icon="iconfont icon-user"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="registerForm.password" prefix-icon="iconfont icon-user"></el-input>
          </el-form-item>
          <el-form-item label="重复输入" prop="repetitionPassword">
            <el-input v-model="registerForm.repetitionPassword" prefix-icon="iconfont icon-user"></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="code">
            <el-input placeholder="请输入内容" v-model="registerForm.code" class="input-with-select">
              <el-button slot="append" type="primary" :disabled="isCode" @click="getCode">{{text}}</el-button>
            </el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="register">注册</el-button>
            <el-button type="info" @click="resetLoginForm">重置</el-button>
            <el-button type="info" @click="login">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getCode, register } from "@/utils/Api";
var checkChinese = (rule, value, callback) => {
  const regChinese = /[^\u4e00-\u9fa5]/;
  if (regChinese.test(value)) {
    return callback();
  }
  callback(new Error("请不要输入中文"));
};
export default {
  data() {
    return {
      checkChinese,
      isCode: false,
      registerForm: {
        phone: "",
        username: "",
        name: "",
        password: "",
        repetitionPassword: "",
        code: "",
      },
      // 表单验证
      registerFormRules: {
        phone: [
          // trigger是设置一个触发器 鼠标失去焦点的时候触发
          {
            required: true,
            message: "请输入手机号",
            validator: validPhone,
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "长度在 11 个字符",
            trigger: "blur",
          },
        ],
        username: [
          // trigger是设置一个触发器 鼠标失去焦点的时候触发
          { required: true, message: "请输入用户名名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名的长度在2～20个字",
            trigger: "blur",
          },
          {
            validator: checkChinese,
            trigger: "blur",
          },
        ],
        name: [
          // trigger是设置一个触发器 鼠标失去焦点的时候触发
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 9,
            message: "长度在 2 到 9 个字符",
            trigger: "blur",
          },
        ],

        password: [
          // trigger是设置一个触发器 鼠标失去焦点的时候触发
          {
            required: true,
            message: "请输入密码",
            validator: validatePass,
            trigger: "blur",
          },
          {
            min: 3,
            max: 11,
            message: "长度在 3 到 11 个字符",
            trigger: "blur",
          },
        ],

        repetitionPassword: [
          // trigger是设置一个触发器 鼠标失去焦点的时候触发
          {
            required: true,
            message: "请输入密码",
            validator: validatePass2,
            trigger: "blur",
          },
          {
            min: 3,
            max: 11,
            message: "长度在 3 到 11 个字符",
            trigger: "blur",
          },
        ],
      },
      text: "获取验证码",
    };

    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!isvalidPass(value)) {
        callback(
          new Error("密码以字母开头 长度在8~18之间 只能包含字母、数字和下划线")
        );
      } else {
        if (this.formData.repassword !== "") {
          this.$refs.ruleForm.validateField("repassword");
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.formData.password) {
        callback(new Error("两次输入密码不一致！"));
      } else {
        callback();
      }
    };

    var validPhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!isvalidPhone(value)) {
        callback(new Error("请填写正确的手机号码"));
      }
    };
  },
  methods: {
    async getCode() {
      if (this.registerForm.phone == null || this.registerForm.phone == "") {
        return this.$message.error(手机号不能为空);
      }
      const { data: res } = await getCode({
        phone: this.registerForm.phone,
        type: 1,
      });
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.message);
      }
      this.$message.success("短信已成功发送");
      this.outTime();
    },
    register() {
      this.$refs.registerFormRef.validate(async (valid) => {
        if (!valid) return false;
        const { data: res } = await register(this.registerForm);
        if (res.meta.status !== 200)
          return this.$message.error("注册失败" + res.meta.message);
        //$message是elment的弹窗
        this.$message.success("注册成功");
        this.$router.push("/login");
      });
    },
    // 表单重置按钮
    resetLoginForm() {
      // resetFields：element-ui提供的表单方法 重置
      this.$refs.registerFormRef.resetFields();
    },
    login() {
      this.$router.push("/login");
    },
    outTime() {
      this.text = 60;
      this.isCode = true;
      const outTime = setInterval(() => {
        this.text = this.text - 1;
        if (this.text == 0) {
          this.text = "获取验证码";
          clearInterval(outTime);
          this.isCode = false;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
/* // lang="less" 支持less格式
// scoped vue的指令，只在当前组件生效 */
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 560px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  background-color: #fff;

  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.login_form {
  position: absolute;
  bottom: 60px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  padding-left: 10px;
  // justify-content: center;
}
.info {
  font-size: 13px;
  margin: 10px 15px;
}
</style>